<template>
  <div class="container">
    <div class="header-box">
        <h3><span>报告管理</span></h3>
        <div class="form-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px">
                <el-form-item label="任务编码">
                    <el-input v-model="formInline.user" placeholder="请输入集合编码"  size="mini"></el-input>
                </el-form-item>
                <el-form-item label="任务名称">
                    <el-input v-model="formInline.user" placeholder="请输入任务名称"  size="mini"></el-input>
                </el-form-item>
                <el-form-item label="内容体载">
                    <el-select v-model="formInline.region" placeholder="全部"  size="mini">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker size="mini"
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="formInline.region" placeholder="全部"  size="mini">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  size="mini" @click="">搜索</el-button>
                    <el-button  size="mini" @click="">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        
    </div>
    <div class="main-box">
        <div class="table-top">
            <el-button type="primary"  size="mini" @click="">新建</el-button>
            <el-button size="mini">批量操作</el-button>
            <el-button size="mini" style="float: right;">导出</el-button>
        </div>
        <el-table :data="tableData" border stripe size="mini" style="width: 100%">
            <el-table-column prop="code" label="任务编码" align="center" width="100"></el-table-column>
            <el-table-column prop="name" label="任务名称" align="center" width="180"></el-table-column>
            <el-table-column prop="date" label="创建时间" align="center" ></el-table-column>
            <el-table-column prop="type" label="任务状态" align="center" ></el-table-column>
            <el-table-column prop="amount" label="任务数据量" align="center" ></el-table-column>
            <el-table-column prop="date2" label="完成/暂停时间" align="center" ></el-table-column>
            <el-table-column prop="execute" label="执行操作" align="center">
                <template slot-scope="scope">
                    <span class="play-box" v-if="scope.row.execute==1">
                        <img src="/play1.png"/>
                        <img src="/zhan2.png"/>
                        <img src="/ting2.png"/>
                    </span>
                    <span class="play-box" v-if="scope.row.execute==2">
                        <img src="/play1.png"/>
                        <img src="/zhan2.png"/>
                        <img src="/ting1.png"/>
                    </span>
                    <span class="play-box" v-if="scope.row.execute==3">
                        <img src="/play2.png"/>
                        <img src="/zhan2.png"/>
                        <img src="/ting2.png"/>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="" label="操作" width="200" align="center" >
                <template slot-scope="scope">
                    <el-button size="mini" type="primary"  @click="">查看</el-button>
                    <el-button size="mini" @click="">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background
        @size-change=""
        @current-change=""
        :current-page="1"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'reportManage',
  data() {
      return {
        value1:'',
        currentPage4: 1,
        formInline: {
          user: '',
          region: ''
        },
        tableData: [{
          code:11,
          name: '数据质量分析任务1',
          date: '2016-05-02',
          type:'未执行',
          amount:213,
          date2: '2016-05-02',
          execute: 1
        },{
          code:12,
          name: '数据质量分析任务2',
          date: '2016-05-02',
          type:'完成',
          amount:213,
          date2: '2016-05-02',
          execute: 2
        },{
          code:12,
          name: '数据质量分析任务2',
          date: '2016-05-02',
          type:'完成',
          amount:213,
          date2: '2016-05-02',
          execute: 2
        },{
          code:12,
          name: '数据质量分析任务2',
          date: '2016-05-02',
          type:'完成',
          amount:213,
          date2: '2016-05-02',
          execute: 1
        },{
          code:12,
          name: '数据质量分析任务2',
          date: '2016-05-02',
          type:'完成',
          amount:213,
          date2: '2016-05-02',
          execute: 2
        },{
          code:12,
          name: '数据质量分析任务2',
          date: '2016-05-02',
          type:'完成',
          amount:213,
          date2: '2016-05-02',
          execute: 3
        },{
          code:12,
          name: '数据质量分析任务2',
          date: '2016-05-02',
          type:'完成',
          amount:213,
          date2: '2016-05-02',
          execute: 2
        },{
          code:12,
          name: '数据质量分析任务2',
          date: '2016-05-02',
          type:'完成',
          amount:213,
          date2: '2016-05-02',
          execute: 2
        },{
          code:12,
          name: '数据质量分析任务2',
          date: '2016-05-02',
          type:'完成',
          amount:213,
          date2: '2016-05-02',
          execute: 3
        },{
          code:12,
          name: '数据质量分析任务2',
          date: '2016-05-02',
          type:'完成',
          amount:213,
          date2: '2016-05-02',
          execute: 2
        },{
          code:12,
          name: '数据质量分析任务2',
          date: '2016-05-02',
          type:'完成',
          amount:213,
          date2: '2016-05-02',
          execute: 1
          
        },{
          code:13,
          name: '数据质量分析任务3',
          date: '2016-05-02',
          type:'暂停',
          amount:213,
          date2: '2016-05-02',
          execute: 3
        }]
      }
   }
}
</script>
<style lang="scss">

</style>
<style lang="scss" scoped>

.play-box{
    img{
        display: inline-block;
        width: 15px;
        margin: 0 5px;
    }
}
</style>
